<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'wasm-unsafe-eval' blob:"> -->
  <title>Basic Video Call -- Agora</title>
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container-fluid banner">
    <p class="banner-text">Virtual Background</p>
  </div>

  <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Congratulations!</strong><span> You can invite others join this channel by click </span><a href=""
      target="_blank">here</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Congratulations!</strong><span> Joined room successfully. </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Congratulations!</strong><span> Joined room successfully. </span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="container" style="padding-bottom: 10px;">
    <form id="join-form">
      <div class="row join-info-group">
        <div class="col-sm">
          <p class="join-info-text">Camera</p>
          <select id="videoSource" /></select>
          <button id="start" class="btn btn-primary btn-sm">Start</button>
        </div>
      </div>

      <div class="row video-group">
        <div class="col">
          <p id="local-player-name" class="player-name"></p>
          <div id="local-player" class="player"></div>
        </div>
        <div class="w-100"></div>
        <div class="col">
          <div id="remote-playerlist"></div>
        </div>
      </div>

      <br />

      <div class="button-group">
        <label class="col-2">Beauty effect:</label>
        <button id="enable" type="button" class="btn btn-primary btn-sm">Enable</button>
        <button id="disable" type="button" class="btn btn-primary btn-sm" disabled>Disable</button>
      </div>

      <div class="row g-3">
        <div class="col-12">
          <label for="contrastlevel" class="col-2">Contrast Level:</label>
          <select id="contrastlevel" class="col-9">
            <option>0</option>
            <option selected="selected">1</option>
            <option>2</option>
          </select>
        </div>
        <div class="col-12">
          <label class="col-2" for="softenlevel">Smoothness Level:</label>
          <input class="col-9" type="range" id="softenlevel" min="1" max="100" value="50">
          <span>0.5</span>
        </div>
        <div class="col-12">
          <label class="col-2" for="whitelevel">White Level:</label>
          <input class="col-9" type="range" id="whitelevel" min="1" max="100" value="60">
          <span>0.6</span>
        </div>
        <div class="col-12">
          <label class="col-2" for="rednesslevel">Redness Level:</label>
          <input class="col-9" type="range" id="rednesslevel" min="1" max="100" value="10">
          <span>0.1</span>
        </div>
        <div class="col-12">
          <label class="col-2" for="sharplevel">Sharpness Level:</label>
          <input class="col-9" type="range" id="sharplevel" min="1" max="100" value="30">
          <span>0.3</span>
        </div>
      </div>

      <br>

      <div class="row join-info-group">
        <div class="col-sm sso-hidden">
        <p class="join-info-text">AppID</p>
        <input id="appid" type="text" placeholder="enter appid" >
        <p class="tips">If you don`t know what is your appid, checkout <a
            href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-nameappidaapp-id">this</a>
        </p>
      </div>
      <div class="col-sm sso-hidden">
        <p class="join-info-text">Token(optional)</p>
        <input id="token" type="text" placeholder="enter token">
        <p class="tips">If you don`t know what is your token, checkout <a
            href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-namekeyadynamic-key">this</a>
        </p>
      </div>
        <div class="col-sm">
          <p class="join-info-text">Channel</p>
          <input id="channel" type="text" placeholder="enter channel name" required>
          <p class="tips">If you don`t know what is your channel, checkout <a
              href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel">this</a></p>
        </div>
      </div>
      <div class="button-group">
        <button id="join" type="submit" class="btn btn-primary btn-sm">Join</button>
        <button id="leave" type="button" class="btn btn-primary btn-sm" disabled>Leave</button>
        <button id="publish" type="button" class="btn btn-primary btn-sm" disabled>Publish</button>
      </div>
    </form>
    <img id="loading" style="z-index: 100;width:200px;height:200px;display:none;" src="../assets/loading.gif" />
  </div>

  
  <script src="../assets/jquery-3.4.1.min.js"></script>
  <script src="../assets/bootstrap.bundle.min.js"></script>
  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
  <script src="./agora-extension-beauty.js"></script>
  <script src="./beauty-face.js"></script>

</body>

</html>
